/*mobile*/

.navclose {display: block;position: fixed;right: 4%;top: 2.2rem;transform: translateY(-50%);z-index: 2001;width: 36px;height: 26px;}
.navclose i {position: absolute;display: block;right: 0;top: 50%;margin-top: -2px;width: 100%;height: 4px;background: #3cad71;opacity: 1;transition: .4s;}
.navclose::before {top: 0;transform-origin: 50% 50% 0;}
.navclose::after {bottom: 0;transform-origin: 50% 50% 0;}
.navclose::before, .navclose::after { content: '';position: absolute;left: 0;width: 100%;height: 4px;-webkit-transform: translateZ(0);-webkit-backface-visibility: hidden;transition: .6s;background: #3cad71;}
body.on .navclose i {opacity: 0;width: 0;}
body.on .navclose::before {top: 50%; transform: translateY(-50%) rotate(-135deg);}
body.on .navclose::after {bottom: auto;top: 50%;transform: translateY(-50%) rotate(135deg);}

.menu{transition: all 1s ease;  position: fixed; width: 100%; height: 100%; z-index: 200; margin: 0 0 0 -100%; background:rgba(255,255,255,0);}
.menu_1{transition: all .6s ease; width: 25%; float: left; margin: 0 0 0 -25%; z-index: 203; position: relative;  height: 100%; background: #fff;background-image: url(../images/wave2.jpg);background-position: center;}
.menu_2{transition: all 1.2s ease; background: #000; width: 75%; float: left; position: relative; z-index: 202; margin: 0 0 0 -75%;height: 100%; }
.menu_3{ transition: all 1.8s ease; border-right:solid 1px #555; box-sizing: border-box; width:33.33%; float: left; height: 100%; position: relative;}

body.on .menu_1 {transform: translateX(100%);}
body.on .menu_2 {transform: translateX(133.3%);}
body.on .menu{transform: translateX(100%);}

/*menu_1*/
.menu_1 img{position:absolute; top:50px; left:40px;width:80px;}
.menu_1_content{width:90%; margin:160px 0 0 40px;}
.menu_1_content ul:nth-child(1){font-size: 18px; line-height: 2;}
.menu_1_content_contact{position:absolute; bottom:80px; left:40px;}

.menu-column-inner{position: relative; height: 100%; background: rgba(0,0,0,0.65);  padding:150px 80px 0 80px;}
.imgbg1{z-index: 203; opacity: 0;  position: absolute; width: 100%; height: 100%; top: 0; left: 0;background: url(../images/bg1.jpg) no-repeat center top;background-size: cover;}
.imgbg2{z-index: 204; opacity: 0;  position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url(../images/bg2.jpg) no-repeat center top;background-size: cover;}
.imgbg3{z-index: 205; opacity: 0;  position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url(../images/bg3.jpg) no-repeat center top;background-size: cover;}
.imgbg img{ display: block; width: 100%; height: 100%;}
.menu_2_in{ position: absolute; width: 100%; height: 100%; z-index: 206; top: 0; left: 0;}

.menu_2:hover{ background:#000;}
.number-inner{color:#fff;}
.number{margin-bottom:30px;}
.number span{font-size:40px; line-height:40px; color:rgba(255,255,255,0.2);}
.title{ font-size:30px; margin-bottom:10px;}
.menu-column-content-hidden p{ line-height:25px; margin-bottom:30px; color:rgba(255,255,255,0.6);}
.materials a{ color:rgba(255,255,255,1); line-height:25px; font-size: 18px;padding-top:10px;display: inline-block;}
/* .bg1 .imgbg{z-index: 203; opacity: 1; }
.bg2 .imgbg{z-index: 203; opacity: 1; }
.bg3 .imgbg{z-index: 203; opacity: 1; } */
/* .bg1{ background: url(../images/bg1.jpg) no-repeat center center;}
.bg2{ background: url(../images/bg2.jpg) no-repeat center center;}
.bg3{ background: url(../images/bg3.jpg) no-repeat center center;} */
.mbg1{background: url(../images/bg1.jpg) no-repeat center top;background-size: cover;}
.mbg2{ background: url(../images/bg2.jpg) no-repeat center top;background-size: cover;}
.mbg3{ background: url(../images/bg3.jpg) no-repeat center top;background-size: cover;}

.hamburger-menu {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	cursor: pointer;
	position: fixed; right:50px; top: 50px; z-index: 220;
}

.hamburger-menu .hamburger-text {
	display:block;
	background:rgba(0,0,0,0.3);
	border-radius:100px;
	color:#fff;
	font-size:13px;
	line-height:17px;
	font-weight:500;
	padding:10px 40px 10px 15px;
	margin-right:-30px;
	-webkit-transition:all 0.3s;
	-o-transition:all 0.3s;
	transition:all 0.3s
}

.no-touchevents .hamburger-menu:hover .hamburger-text {padding-right: 50px}

.menu-button {
	min-width: 47px;
	height: 47px;
	-webkit-transition: background-color 0.3s;
	-o-transition: background-color 0.3s;
	transition: background-color 0.3s
}

.menu-button .lines {
	color: #4A4A4A;
	border-bottom: 1px solid;
	width: 20px;
	height: 7px;
	margin-bottom: 5px;
	display: block;
	position: relative;
	-webkit-transition: color 0.3s;
	-o-transition: color 0.3s;
	transition: color 0.3s
}

.menu-button .lines:after,
.menu-button .lines:before {
	content: "";
	width: 100%;
	border-bottom: 1px solid;
	position: absolute;
	top: 0;
	-webkit-transition: -webkit-transform 0.3s;
	transition: -webkit-transform 0.3s;
	-o-transition: transform 0.3s;
	transition: transform 0.3s;
	transition: transform 0.3s, -webkit-transform 0.3s
}

.menu-button .lines:after {
	bottom: -8px;
	width: 10px;
	right: 0
}

.menu-active .menu-button .lines {
	border-bottom: 0;
	top: 5px
}

.menu-active .menu-button .lines:after,
.menu-active .menu-button .lines:before {
	left: 0
}

.menu-active .menu-button .lines:before {
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg)
}

.menu-active .menu-button .lines:after {
	width: 100%;
	right: auto;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	bottom: auto
}

.menu-fadeout .menu-button {
	cursor: inherit;
	pointer-events: none
}

.close-button {
	position: absolute;
	right: 45px;
	top: 30px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	cursor: pointer
}

.close-button .text {
	padding-right: 10px;
	text-transform: uppercase;
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.2px
}

.close-button .btn-round {
	width: 38px;
	height: 38px;
	background-color: #f76c4e
}

.close-button .btn-round .lines {
	color: #fff;
	width: 18px;
	height: 18px;
	top: 9px;
	display: block;
	position: relative;
	-webkit-transition: color 0.3s;
	-o-transition: color 0.3s;
	transition: color 0.3s
}

.close-button .btn-round .lines:after,
.close-button .btn-round .lines:before {
	content: "";
	width: 100%;
	border-bottom: 1px solid;
	position: absolute;
	top: 0;
	left: 0;
	-webkit-transition: -webkit-transform 0.3s;
	transition: -webkit-transform 0.3s;
	-o-transition: transform 0.3s;
	transition: transform 0.3s;
	transition: transform 0.3s, -webkit-transform 0.3s;
	-webkit-transform-origin: center;
	-ms-transform-origin: center;
	transform-origin: center
}

.close-button .btn-round .lines:before {
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg)
}

.close-button .btn-round .lines:after {
	width: 100%;
	right: auto;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	bottom: auto
}

.close-button:hover .btn-round {
	background-color: #414141
}

.contact-button {
	white-space: nowrap;
	margin-left: 13px;
	background-color: #f76c4e
}

.contact-button:hover {
	background-color: #414141
}

.menu-active .contact-button {
	display: none
}

.btn-round.shadow {
	-webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15);
	box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15)
}
.btn-round {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: #ffffff;
    display: inline-block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
    color: #4a4a4a;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    background-repeat: no-repeat;
    background-position: center center;
}
.menu-button {
    min-width: 47px;
    height: 47px;
    -webkit-transition: background-color 0.3s;
    -o-transition: background-color 0.3s;
    transition: background-color 0.3s;
}
.menu-column .menu-column-inner {
	
    background-color: transparent;
    padding: 0 25px 0 35px;
    height: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    left: -100%;
}